<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'施工团队'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="(this.pmUserInfo.worker_number=== undefined || this.pmUserInfo.worker_number === '' || this.pmUserInfo.worker_number === null) ? '' : 'analyLightGreen'">施工实力</p>
             <!-- v-if="flg==1" -->
            <div class="analyItemCon">
                    <p class="col-md-6">
                        <span class="cLightGray pr8">团队</span>
                        <span>{{this.pmUserInfo.worker_number ? this.pmUserInfo.worker_number : 0}}</span>
                    </p>
                    <p class="col-md-6">
                            <rx-qrcode class :value="list[0].en" :options="{width: 100,height:100}"></rx-qrcode>
                            <span class="cRed">扫描此码可添加自己的工人</span>
                        </p>
                    <!-- <p class="col-md-6">
                        <span class="cLightGray pr8">接单金额</span>
                        <span>{{this.pmUserInfo.amount ? this.pmUserInfo.amount : ''}}</span> 万
                    </p> -->
                    <!-- <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=0">
                    </div> -->

            </div>
            <!-- <div class="analyItemCon" v-if="flg==0">
                <p class="col-md-6">
                    <span class="cLightGray pr8">团队</span>
                    <input type="text" class="width120 evaluateStandard" name="set_stage_info_make_type" value="">
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">接单金额</span>
                    <input type="text" class="width120 evaluateStandard" name="set_stage_info_make_type" v-model="amount"> 万
                </p>
                <div class="imgbox imgbox2 " style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                    <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updUserInfoNew()">
                    <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
                </div>
            </div> -->
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="Number(this.fuIds.length) === 0 ? '' : 'analyLightGreen'">擅长</p>
             <!-- v-if="flg==1" -->
            <div class="analyItemCon">
                <p class="col-md-10">
                    <!-- <span class="cLightGray pr8">类型</span> -->
                    <!--  ref="table" -->
                    <span>
                        <!-- <span v-for="(item,index) in workType" :key="index">
                            <input name="check" class="selBtn" type="checkbox" :value="item.id" v-model="fuIds" @change="getTwoTypes($event)"/>{{item.name}}
                        </span> -->
                        <el-checkbox-group  v-model="fuIds"  :max="3">
                            <el-checkbox v-for="(item,index) in workType" :label="item.id" :value="item.id" :key="index" @change="getTwoTypes()">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </span>
                </p>
                <p class="col-md-2">
                    <input type="button" value="提交" class="uiBtn-normal uiBtn-blue SubmitBtn" @click="MappingButton()">
                </p>
                    <!-- <p class="col-md-6">
                        <span class="cLightGray pr8">接单金额</span>
                        <span>{{this.pmUserInfo.amount ? this.pmUserInfo.amount : ''}}</span> 万
                    </p> -->
                    <!-- <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=0">
                    </div> -->

            </div>
            <!-- <div class="analyItemCon" v-if="flg==0">
                <p class="col-md-6">
                    <span class="cLightGray pr8">团队</span>
                    <input type="text" class="width120 evaluateStandard" name="set_stage_info_make_type" value="">
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">接单金额</span>
                    <input type="text" class="width120 evaluateStandard" name="set_stage_info_make_type" v-model="amount"> 万
                </p>
                <div class="imgbox imgbox2 " style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                    <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updUserInfoNew()">
                    <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
                </div>
            </div> -->
        </div>
    </div>
            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl">
                    <span v-if="(this.pmUserInfo.worker_number=== undefined || this.pmUserInfo.worker_number === '' || this.pmUserInfo.worker_number === null) || Number(this.fuIds.length) === 0" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
        </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { updateUserInfoMappingMsg, getPmWorkAreaByUid, getPmMsgByRsAppId } from '../../Resources/Api/index'
import rxQrcode from '@rx/packages/qrcode/Index'
// updUserInfoNew
export default {
    components: {
        rxQrcode
    },
    data () {
        return {
            checkboxGroup: [],
            workType: [],
            huixian: {},
            fuIds: [], // 类型的数组
            flg: 1,
            amount: 0, // 订单金额
            list: [], // 二维码集合
            pmUserInfo: {} // 用户的信息
            // makeAcreageStart: 0, // 做过面积开始值
            // makeAcreageEnd: 0, // 做过面积结束值
            // makeType: '' // 做过面积类型
        }
    },
    created () {
        this.pmUserInfo = this.$route.query.pmUserInfo
        this.workTypeArray()
        this.PmWorkAreaByUid()
        this.finderweima() // 调用查询二维码接口
        // console.log(this.pmUserInfo)
        // this.amount = this.pmUserInfo.amount
        // this.worker_number = this.pmUserInfo.worker_number
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        getTwoTypes (value) {
            console.log(value)
            console.log('fuIds', this.fuIds)
        },
        // 二维码
        finderweima (value) {
            let url = ''
            getPmMsgByRsAppId({
                rsAppId: this.leftInfo.rs_app_id
            }).then(res => {
                if (res.data.statusCode === 1) {
                    url = 'https://ggrlm.rxjy.com/static/register/recommend.html?sourceId=' + res.data.body.uid + '&sourceType=3&sourceName=' + res.data.body.userName + '&sourceAreaId=' + res.data.body.inductionArea
                    let object = {}
                    object.cn = '无法访问此网站'
                    object.en = url
                    object.sn = this.leftInfo.rs_app_id
                    this.list.push(object)
                    // alert(this.list)
                    // console.log()
                    this.$nextTick(function () {
                        this.qrcode(url)
                    })
                }
            }).catch(err => {
                console.log('getPmMsgByRsAppId appId 失败，原因为：' + err)
            })
            return url
        },
        qrcode (a) {
            /* eslint-disable */
      let qrcode = new QRCode('qrcode', {
        width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: a // 设置二维码内容或跳转地址
      })
      },
        MappingButton () {
            if (Number(this.fuIds.length) === 0) {
                layer.msg('请选择您的擅长类型')
                return
            }
            console.log(this.fuIds)
            updateUserInfoMappingMsg({
                uid: this.leftInfo.uid, // uid
                typeValue: this.fuIds.join(',') // 类型
            }).then(res => {
                this.$message(res.data.Body)
                this.fuIds = []
                this.$router.push(this.$route.matched[1].path)
                // this.PmWorkAreaByUid()
            }).catch(err => {
                console.log(err)
                this.$message('提交失败')
            })
        },
        PmWorkAreaByUid () {
            let _this = this
            _this.huixian = {}
            getPmWorkAreaByUid({
                uid: this.leftInfo.uid
            }).then(result => {
                this.huixian = result.data.Body
                if (Number(this.huixian.typeValue.typeValue.length) > 1) {
                    this.huixian.typeValue.typeValue.split(',').forEach(id => {
                        this.fuIds.push(Number(id))
                    })
                    // this.fuIds = (
                    //     this.huixian.typeValue.typeValue.split(',')
                    // ) /* typeValue='1-100,1-200' */ /* 在这里时1，2，3，4 */
                } else {
                    this.fuIds.push(
                        Number(this.huixian.typeValue.typeValue)
                    )
                }
                // console.log(this.fuIds, 111111111111)
            })
        },
        // 修改接单金额
        // updUserInfoNew () {
        //     updUserInfoNew({
        //         uid: this.leftInfo.uid,
        //         amountEceived: this.amount
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             layer.msg('修改成功')
        //             // this.setUpdatePlate()
        //             this.$router.push(this.$route.matched[1].path)
        //         }
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // }
        workTypeArray () {
            this.workType = [{
                flag: false,
                name: '办公',
                id: 1
            }, {
                flag: false,
                name: '餐饮',
                id: 2
            }, {
                flag: false,
                name: '商业',
                id: 3
            }, {
                flag: false,
                name: '酒店',
                id: 4
            }, {
                flag: false,
                name: '教育',
                id: 6
            }, {
                flag: false,
                name: '会所',
                id: 7
            }, {
                flag: false,
                name: '家装',
                id: 8
            }, {
                flag: false,
                name: '别墅',
                id: 9
            }]
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    }
}
</script>
<style  scoped>
    .imgbox {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
